<template>
	<view class="box">
		<cu-custom bgColor="bg-gradual-blue" :isBack="true">
			<block slot="backText">返回</block>
			<block slot="content">个人中心</block>
		</cu-custom>
		<!--中间内容-->
		<view class="personal">
			<view class="personal-main" v-if="isLogin">
				<u-avatar :src="avatars" mode="img" shape="square" size="60" class="u-avatar"></u-avatar>
				<view class="personal-info">
					<view style="margin-left: 10px;">
						<u-tag :text="userName" type="success" plain></u-tag>
					</view>
				</view>
			</view>
			<view class="personal-main" v-else-if="nickName">
				<u-avatar :src="avatar" mode="img" shape="square" size="60" class="u-avatar"></u-avatar>
				<view class="personal-info">
					<view style="margin-left: 10px;">
						<u-tag :text="nickName" type="success" plain></u-tag>
					</view>
				</view>
			</view>
			<view class="personal-main" v-else>
				<view class="personal-info">
					尊贵的用户&nbsp;请您先登录！
				</view>
			</view>
			<u-icon name="arrow-right" size="20" class="p-right-icon"></u-icon>
		</view>
		<view class="n-p" v-for="(item,index) in list" :key="index" hover-class="hover-class" @click="onClick(item)">
			<view style="position: relative">
				<view class="p-left">
					<u-icon :name="item.icon" size="16"></u-icon>
				</view>
			</view>
			<view class="p-right">
				<view class="p-right-main">
					<view class="p-right-main-name">{{item.name}}</view>
				</view>
				<view class="lfet-a">
					<view style="position: relative"></view>
					<u-icon name="arrow-right" size="20" class="p-right-icon"></u-icon>
				</view>
			</view>
		</view>
		<view class="padding-xl">
			<button class="cu-btn block bg-blue margin-tb-sm lg shadow" @click="hasLogin">
				登录<text style="margin: 10px;">|</text>注册
			</button>
			<view>
				<button class="cu-btn block bg-green margin-tb-sm lg shadow" @click="getUserProfile"> 微信一键登录
				</button>
			</view>
			<button class="cu-btn block bg-grey margin-tb-sm lg shadow" @click="loginOut">
				退出登录
			</button>
		</view>

		<!--引入tabar-->
		<tabbar tabIndex="2"></tabbar>
	</view>
</template>

<script>
	import {
		mapGetters
	} from 'vuex'
	export default {
		data() {
			return {
				avatars: '/static/image/logo.jpeg',
				list: [{
					name: '设置',
					id: 'setUp',
					icon: 'setting-fill',
					iconBackground: '#3b2021',
				}],
				nickName:"",
				avatar:""
			}
		},
		mounted() {

		},
		computed: {
			userName() {
				return this.$store.getters.getName;
			},
			isLogin() {
				return this.$store.getters.isLogin;
			}
		},

		methods: {
			getUserProfile: function(e) {
				var that=this;
				// 获取个人信息
				wx.getUserProfile({
					desc: '用于获取用户个人信息',
					success: function(detail) {
						wx.login({
							success(res) {
								var code = res.code; //登录凭证
								uni.request({
									url: 'http://q369121a54.wicp.vip/wxuser/wxuser', 
									// 需要传给后端的数据
									data: {
										encryptedData: detail.encryptedData,
										iv: detail.iv,
										code: code,
										userInfo: detail.rawData
									},
									method: 'post',
									success: function(res) {
										// 将用户授权信息存储到本地
										wx.setStorageSync('userinfo', detail.userInfo)
										// 将后端返回的token存储到本地
										wx.setStorageSync('token', res.data.token)
								
										uni.request({
											url: 'http://q369121a54.wicp.vip/wxuser/wxuserList',
											data: {},
											method: 'post',
											header: {
												'content-type': 'application/json'
											},
											success: (res) => {
											   that.nickName=res.data[0].nickName
											   that.avatar=res.data[0].avatar
											}
										})
									},
									fail: function() {
										console.log('系统错误')
									}
								})
							}
						});
					},
					fail: function() {
						wx.showModal({
							content: '取消授权将会影响相关服务，您确定取消授权吗？',
							success(res) {
								if (res.confirm) {
									wx.showToast({
										title: '已取消授权',
										duration: 1500
									})
								} else if (res.cancel) {
									this.getUserProfile()
								}
							}

						})
					}
				})
			},
			hasLogin() {
				if (isNaN(this.isLogin) == true||isNaN(this.nickName)==true) {
					uni.showToast({
						title: '您已经登录',
						icon: 'success'
					});
				} else {
					uni.navigateTo({
						url: "/pages/user/loginAndReg/login"
					})
				}
			},
			loginOut() {
				if (isNaN(this.isLogin) == false&&isNaN(this.nickName)==false) {
					uni.showToast({
						title: '您还未登录',
						icon: 'none'
					});
				} else {
					wx.removeStorageSync("userinfo")
					this.nickName=""
					this.$store.dispatch("LogOut").then(response => {
						uni.showToast({
							title: '成功退出',
							icon: 'success'
						});
					});
				}

			}
		}
	}
</script>
<style>
	page {
		background-color: #f7f7f7;
	}
</style>

<style lang="scss" scoped>
	.personal {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 30rpx 0 40rpx 30rpx;
		background-color: #ffffff;
		margin-top: 12px;
	}

	.personal-main {
		display: flex;
		align-items: center;
		height: 40px;

	}

	.personal-info {
		display: flex;
		flex-direction: column;
		font-size: 16px;
	}

	.u-avatar {
		margin-right: 30rpx;
	}

	.navbar-right {
		padding: 0 40rpx;
	}

	.navbar-right-icon {
		margin-left: 50rpx;
	}

	.hover-class {
		background-color: #efefef;
	}

	.n-p {
		margin-top: 10px;
		display: flex;
		align-items: center;
		background-color: #ffffff;
		margin-bottom: 20rpx;
	}

	.p-right-icon {
		padding: 0 40rpx;
	}

	.p-left {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 60rpx;
		height: 60rpx;
		padding: 10rpx;
		margin: 20rpx;
		color: #FFFFFF;
		border-radius: 10rpx;

	}

	.p-right {
		height: 90rpx;
		flex: 1;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.p-right-main {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.p-right-main-name {
		font-size: 30rpx;
		font-weight: 500;
	}

	.p-right-main-time {
		margin-right: 20rpx;
		font-size: 24rpx;
		color: #9d9d9d;
	}
</style>
